<template>
  <div class="home">
    <router-view></router-view>
    <div class="nav">
      <router-link to="/home/homecontent" class='homecontent' @click='homeconfun'>
        <div class="logo lg_home"></div>
        首页
      </router-link>
      <router-link to="/home/order" class='order' @click='orderfun'>
        <div class="logo lg_order"></div>
        订单
      </router-link>
      <router-link to="/home/personal" class='personal' @click='personalfun'>
        <div class="logo lg_personal"></div>
        个人中心
      </router-link>
    </div>
  </div>
</template>

<script>
export default {
  name: 'home',
  methods: {
    homeconfun () {

    },
    orderfun () {

    },
    personalfun () {

    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
@nav-img-home:url(/static/Home/HomeContent1.png);
@nav-img-home-hover:url(/static/Home/HomeContent2.png);
@nav-img-order:url(/static/Home/order1.png);
@nav-img-order-hover:url(/static/Home/order2.png);
@nav-img-personal:url(/static/Home/personal1.png);
@nav-img-personal-hover:url(/static/Home/personal2.png);
.nav{
  position: fixed;
  bottom: 0;
  width: 100%;
  display: flex;
  justify-content: space-around;
  background-color: #fff;
  &>a{
    display: block;
    width: 60px;
    color: #2c3e50;
    padding:5px 0;
    .logo{
      width: 28px;
      height: 28px;
      margin:auto;
      background-size: contain;
      background-position: center;
      background-repeat: no-repeat;
      margin-bottom:3px;
    }
    .lg_home{
      background-image: @nav-img-home;
    }
    .lg_order{
      background-image: @nav-img-order;
    }
    .lg_personal{
      background-image: @nav-img-personal;
    }
  }
}
.homecontent.router-link-active{
  .lg_home{
    background-image: @nav-img-home-hover;
  }
}
.order.router-link-active{
  .lg_order{
    background-image: @nav-img-order-hover;
  }
}
.personal.router-link-active{
  .lg_personal{
    background-image: @nav-img-personal-hover;
  }
}

</style>
